<template>
  <div>
    <avue-form
      :option="option"
      ref='crud'
      v-model="form">
      <template slot="boxCounts">
        <el-input size="mini" v-model="form.boxCounts" placeholder="请输入 标箱数量" v-int clearable :disabled="type=='view'"></el-input>
      </template>
    </avue-form>

    <div class="center mt">
      <el-button icon="el-icon-circle-close" size="mini" @click="$emit('close')">取 消</el-button>
      <el-button icon="el-icon-circle-plus-outline" v-if="type=='add'" v-loading="goon" size="mini" @click.stop="saveAndGoon()">保存并继续</el-button>
      <el-button icon="el-icon-circle-plus-outline" :loading="saveLoading" type="primary" v-show="type!='view'" size="mini" @click="saveFn">保 存</el-button>
    </div>
  </div>
</template>

<script>

import {materialAdd, materialUpdate} from "@/api/project/productData/material";

export default {
  props:['type','row'],
  data() {
    return {
      areaList: [],
      categoryList: [],
      saveLoading:false,
      goon:false,
      form:{},
      props: {
        label: 'dictValue',
        value: 'dictKey'
      },
      locList:[],
      loadings: false,
      index:0,
      defaultUnit: '',
      option: {
        submitBtn:false,
        emptyBtn:false,
        labelWidth:130,
        column: [
          {
            label: '物料编码',
            prop: 'materialNo',
            disabled:false,
            span:12,
            rules:[
              {
                required:true,
                message:'请输入物料编码',
                trigger:'blur'
              }
            ]
          },
          {
            label: '物料名称',
            prop: 'materialName',
            disabled:false,
            span:12,
            rules:[
              {
                required:true,
                message:'请输入物料名称',
                trigger:'blur'
              }
            ]
          },
          {
            label: '追溯类型',
            prop: 'traceAccuracy',
            type:'radio',
            dicData:[
              {label:'批追',value:"1"},
              {label:'精追',value:"2"},
            ],
            disabled:false,
            span:12,
            rules:[
              {
                required:true,
                message:'请选择追溯类型',
                trigger:'blur'
              }
            ]
          },
          {
            label: '标箱数量',
            prop: 'boxCounts',
            disabled:false,
            formslot:true,
            span:12,
            rules:[
              {
                required:true,
                message:'请输入标箱数量',
                trigger:'blur'
              }
            ]
          },
          {
            label: '计量单位',
            prop: 'unit',
            disabled:false,
            span:12,
            rules:[
              {
                required:true,
                message:'请输入计量单位',
                trigger:'blur'
              }
            ]
          },
        ],
      },
    };
  },
  methods: {
    beforeUpload(file) {
      var reg = /^.*\.(?:xls|xlsx)$/i;
      if (!reg.test(file.name)) {
        this.$message.error('请上传xls或xlsx格式文件!');
        return false;
      }
      const isLt10M = file.size / 1024 / 1024 < 30;
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 30MB!');
        return false;
      }
      this.loading = true;
    },
    uploadError(err) {
      this.$message.error(JSON.parse(err.message).msg);
      this.loading = false;
      return false;
    },
    uploadSuccess() {
      this.onLoad(this.page);
      this.$message.success('操作成功');
    },
    saveFn() {
      this.$refs.crud.validate((res,done) => {
        if (res) {
          let row= {
            ...this.form,
          }
          this.saveLoading = true
          if(this.type == 'add'){
            materialAdd(row).then(
              () => {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                this.saveLoading = false;
                this.$emit('reload')
              },
            ).catch(()=>{
              done();
              this.saveLoading = false;
            });
          }else{
            materialUpdate(row).then(
              () => {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                this.saveLoading = false;
                this.$emit('reload')
              },
            ).catch(()=>{
              done();
              this.saveLoading = false;
            });
          }
        }
      });
    },

    saveAndGoon() {
      this.$refs.crud.validate((res,done) => {
        if (res) {
          let row= {
            ...this.form,
          }
          this.goon = true
          materialAdd(row).then(
            () => {
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
              for (let key in this.$refs.crud.value) {
                this.$refs.crud.value[key] = null;
              }
              // this.$set(this.form, 'version', '01');
              // this.$set(this.form, 'quotaFlag', '2');
              // this.$set(this.form, 'unit', this.defaultUnit);
              // this.$set(this.form, 'warehouseArea', []);
              this.goon = false;
              this.$emit('closeAfter');
              done();
            },
          ).catch(()=>{
            done();
            this.goon = false;
          });
        }
      });
    },
  },
  created() {
    if(this.type !='add'){
      this.form = {
        ...this.row,
      }
    }
    if(this.type == 'view'){
      this.option.column.forEach((item, index) => {
        item.disabled = true;
      });
    }
  },
};
</script>

<style>
.avue-crud__pagination {
  margin-top: 0;
  padding: 0;
}
.option_item {
  flex-shrink: 0;
  height: 28px;
  line-height: 28px;
  padding: 2px 20px;
}
</style>
